/*
 * @Author: xiaosihan 
 * @Date: 2024-08-25 17:36:47 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-08-25 20:53:01
 */


import homeStore from "@views/home/homeStore";
import { ReactNode, useEffect, useRef, useState } from "react";
import { useParams } from "react-router-dom";
import styles from "./modelView.module.less";
import modelViewRender from "./modelViewRender";
import homeRenderer from "@views/home/homeRender";
import { autorun } from "mobx";
import { Button } from "antd";

interface Iprops {
    children?: ReactNode
}

export default function ModelView(props: Iprops) {

    const { role, anima } = useParams();
    const [animas, setAnimas] = useState(homeStore.animas);

    const audio = useRef(document.createElement("audio"));

    useEffect(() => autorun(() => {
        setAnimas(homeStore.animas);
    }), []);

    useEffect(() => {
        role && homeStore.setRole(role);

    }, [role]);

    useEffect(() => {
        if (anima === "talk") {
            modelViewRender.mesh.setAnimas("talk");
            audio.current.src = "./ai介绍.mp3";
            audio.current.onplay = () => {
                modelViewRender.mesh.setAnimas("talk");
            }
            audio.current.onended = () => {
                location.href = `${location.origin}${location.pathname}#/modelView/${role}/wink`;
            }
            audio.current.play();
        } else {
            audio.current.pause();
            modelViewRender.mesh.setAnimas(anima || "wink");
        }
    }, [anima]);

    return (
        <div className={styles.modelView}>
            <div
                onClick={() => {
                    location.href = `${location.origin}${location.pathname}#/modelView/${role}/talk`;
                }}
                className={styles.modelView}
                ref={dom => modelViewRender.setContainer(dom)}
            >
            </div>
            <div className={styles.btns} >
                {
                    animas.map((a, i) => {
                        return (
                            <Button
                                key={i}
                                block
                                type={anima === a ? "primary" : "default"}
                                size="small"
                                onClick={() => {
                                    location.href = `${location.origin}${location.pathname}#/modelView/${role}/${a}`;
                                }}>
                                {a}
                            </Button>
                        );

                    })
                }
            </div>
        </div>
    );

}